<template>
  <div id="userBottom">
    <div v-for="(item,index) in bottomItemsArr" :key="index">
      <bottom-item name="text" :item-src="item.path" :item-text="item.text" :to="item.to"></bottom-item>
    </div>
  </div>
</template>

<script>
  import BottomItem from "./BottomItem";

  export default {
    name: "userBottom",
    components:{
      BottomItem,
    },
    data() {
      return {
        bottomItemsArr: [
          {path: require('assets/img/profile/user/haoyou.png'), text: '我的好友', to: '/message'},
          {path: require('assets/img/profile/user/luxian.png'), text: '我的路线', to: '/routeList'},
          {path: require('assets/img/profile/user/shoucang.png'), text: '我的收藏'},
          {path: require('assets/img/profile/user/shangjin.png'), text: '赏金'},
        ]
      }
    }
  }
</script>

<style scoped>
#userBottom{
  display: flex;
  justify-content: space-evenly;
}
</style>
